<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">
        <span @click="handleEmit">首页</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item>评论管理</el-breadcrumb-item>
      <el-breadcrumb-item>评论列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{total}} 条评论</span>
        <!-- 分页功能 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="queryInfo.pagenum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="queryInfo.pagesize"
          layout="sizes, prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
      <div>
        <!-- 发表评论盒子 -->
        <div class="addComment_box" v-for="(item, index) in commentList" :key="index">
          <!-- 左边头像容器 -->
          <div class="avator_wrap">
            <img :src="http + item.user.avator" alt />
          </div>
          <!-- 右边评论信息容器 -->
          <div class="comment_wrap">
            <!-- 用户名行 -->
            <div class="username">{{item.user.username}}</div>
            <!-- 评论内容行 -->
            <div class="content">{{item.content}}</div>
            <!-- 发表时间行 -->
            <div class="createAt">
              {{index + 1}}楼 {{item.createAt | dateFormat}}
              <!-- 回复按钮 -->
              <span @click="handleResponseBoxShow(index, item._id)" v-if="item.response===null">回复</span>
            </div>

            <!-- 展示已存在的回复数据的盒子 -->
            <div class="response_box" v-if="item.response">
              <!-- 回复行：左边头像容器 -->
              <div class="res_avator_wrap">
                <img :src="http + item.response.user.avator" alt />
              </div>
              <!-- 回复行：右边评论信息容器 -->
              <div class="res_comment_wrap">
                <!-- 用户名行 -->
                <div class="res_username">
                  {{item.response.user.username}}
                  <span class="res_content">{{item.response.content}}</span>
                </div>
                <!-- 发表时间行 -->
                <div class="res_createAt">
                  <span class="time">{{item.response.createAt | dateFormat}}</span>
                  <!-- 删除评论下拉按钮 -->
                  <el-dropdown trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">
                      删除
                      <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item :command="item.response._id" icon="el-icon-delete">删除评论</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </div>
            </div>

            <!-- 回复评论输入框 -->
            <div class="response_input" v-if="item.showResponseBox">
              <!-- 文本域 -->
              <el-input
                type="textarea"
                :rows="2"
                :placeholder="'回复 @' + item.user.username"
                v-model="textarea"
              ></el-input>
              <button @click="addComment">回复留言</button>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      http: 'http://localhost',
      // 分页参数
      queryInfo: {
        pagenum: 1,
        pagesize: 5
      },
      // 评论列表数据
      commentList: [],
      // 数据总条数
      total: 0,
      // 评论内容
      textarea: '',
      // 控制回复评论行的显示与否
      showResponseBox: false,
      // 当前登陆用户的id
      uid: this.$store.state.uid,
      // 将要被回复的评论id
      cid: ''
    }
  },
  created() {
    this.getCommenntList()
  },
  methods: {
    // 点击面包屑首页的时候，让父组件清空侧边栏选中
    handleEmit() {
      this.$emit('handleNavChange')
    },
    // 获取所有0层评论列表数据
    async getCommenntList() {
      const { data: res } = await this.$http.get('comments', {
        params: this.queryInfo
      })
      if (res.meta.status !== 200) {
        return this.$message.error('获取评论数据失败')
      }
      console.log(res.comments)
      // 为每条评论添加一个控制回复评论行显示与否的属性
      res.comments.records.forEach(item => {
        item.showResponseBox = false
      })

      // 为

      // 给data中的数据赋值
      this.commentList = res.comments.records
      this.total = res.comments.total
    },
    // 每页显示条数改变
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getCommenntList()
    },
    // 当前页数改变
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage
      this.getCommenntList()
    },
    // 点击了回复按钮 控制回复评论行的显示与否
    handleResponseBoxShow(index, id) {
      // 先保存将要被回复的评论id
      this.cid = id

      // 0.先隐藏所有其他回复行
      // 0.并清空文本域内容
      this.commentList.forEach((item, i) => {
        if (i !== index) {
          item.showResponseBox = false
        }
      })
      this.textarea = ''
      // 1.通过形参接收到当前点击回复的索引值
      // 2.通过索引值修改评论列表中对应的showResponseBox属性
      this.commentList.some((item, i) => {
        if (i === index) {
          item.showResponseBox = !item.showResponseBox
          return true
        }
      })
    },
    // 确认提交评论
    async addComment() {
      console.log(this.cid, this.textarea)
      // 判断评论是否为空
      if (this.textarea.trim().length === 0) {
        return this.$message.error('内容不能为空')
      }
      // 发送请求，提交回复评论
      const { data: res } = await this.$http.post('comments/' + this.uid, {
        type: 'response',
        cid: this.cid,
        content: this.textarea
      })
      if (res.meta.status !== 201) {
        return this.$message('回复失败')
      }
      this.$message.success('回复成功')
      this.getCommenntList()
    },
    // 点击了删除按钮
    async handleCommand(command) {
      const confirmResult = await this.$confirm('此操作将永久删除该评论, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除操作')
      }
      // 确定删除，发送请求
      const { data: res } = await this.$http.delete('comments/' + command)
      if (res.meta.status !== 200) {
        return this.$message.error('删除评论失败')
      }
      // 删除成功，给出提示
      this.$message.success('删除评论成功')
      this.getCommenntList()
    }
  }
}
</script>

<style lang="less" scoped>
.addComment_box {
  display: flex;
  padding-right: 430px;
  margin-bottom: 15px;
  .avator_wrap {
    width: 80px;
    display: flex;
    justify-content: center;
    img {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1px solid #ccc;
    }
  }
  .comment_wrap {
    flex: 1;
    border-bottom: 1px solid #ccc;
    padding-bottom: 12px;
    .username {
      color: #6d757a;
      padding: 5px 0;
      font-size: 14px;
      font-weight: 700;
    }
    .content {
      padding: 5px 0;
    }
    .createAt {
      padding: 5px 0;
      font-size: 12px;
      color: #99a2aa;
      span {
        margin-left: 20px;
        cursor: pointer;
      }
    }
    .response_input {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 5px;
      button {
        width: 70px;
        height: 54px;
        padding: 4px 15px;
        margin-left: 15px;
        font-size: 14px;
        color: #fff;
        border-radius: 4px;
        text-align: center;
        min-width: 60px;
        vertical-align: top;
        cursor: pointer;
        background-color: #00a1d6;
        border: 1px solid #00a1d6;
        transition: 0.1s;
        user-select: none;
        outline: none;
      }
      button:hover {
        opacity: 0.9;
      }
    }
  }
}

.response_box {
  display: flex;
  margin-top: 5px;
  .res_avator_wrap {
    width: 40px;
    text-align: center;
    img {
      width: 24px;
      height: 24px;
      border: 1px solid #ccc;
      border-radius: 50%;
      margin-top: 5px;
    }
  }
  .res_comment_wrap {
    flex: 1;
    .res_username {
      width: 100%;
      color: #6d757a;
      padding: 5px 0;
      font-size: 12px;
      font-weight: 700;
      .res_content {
        width: 100%;
        font-size: 14px;
        color: #333;
        font-weight: normal;
        padding-left: 15px;
      }
    }
    .res_createAt {
      display: flex;
      justify-content: space-between;
      .time {
        font-size: 12px;
        color: #99a2aa;
        padding: 5px 0;
      }
    }
  }
}

.el-dropdown-link {
  font-size: 12px;
  cursor: pointer;
  color: #333;
}
.el-dropdown-link:hover {
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}

</style>
